<script lang="ts" setup>
	import { ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let router = useRouter()
	const getList = function () {
		proxy.$req('GET', proxy.$api.getCityList, {}).then((res) => {
			console.log(res);
			if (!res.success) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				return
			}
			res.result.map((item) => {
				dataList.value.push(...item.cityTos)
			})
			console.log(dataList.value, 'dataList.value ');
		})
	}();
	const dataList = ref([])
	const itemclick = (e) => {
		console.log('点击列表回调：', e)
		uni.$emit('choseAddress', e)
		router.back()
	}
	const HotList = ref([])
	const currentData = ref({name:'定位中'})
	const getCityByLocationFun = (longitude,latitude)=>{
		proxy.$req('GET', proxy.$api.getCityByLocation, {longitude:longitude,latitude:latitude}).then((res) => {
			console.log(res,'getCityByLocation')
			if(res.code == 200){
				currentData.value = res.result
			}
		})
	}
	const getAddress = () => {
		// currentData.value = {address:'北京'}
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			enableHighAccuracy: false, // 开启高精度模式
			success: function (res) {
				console.log(res,'444');
				getCityByLocationFun(res.longitude,res.latitude)
				
			}
		});
	}
	onLoad(()=>{
		getAddress()
		getHotList()
		
	})
	
	const getHotList = ()=>{
		proxy.$req('GET', proxy.$api.getHotList).then((res) => {
			if(res.code == 200){
				HotList.value = res.result
			}
		})
	}
	
</script>
<template>
	<view class="page-main">
		<view class="xlistBox">
			<next-indexed-xlist :dataList="dataList" :showAvatar="false" imgKey="parentCode" :isInterlock="true"
				@itemclick="itemclick">
				<view class="rm-box">
					<view class="title">当前定位</view>
					<view class="rm-current">
						<text class="info" @click="itemclick(currentData)">{{currentData.name}}</text>
						<text class="info addressBtn" @click="getAddress">重新定位</text>
					</view>
				</view>
				<view class="rm-box">
					<view class="title">热门城市</view>
					<view class="rm-city">
						<text v-for="item in HotList" class="item-city" @click="itemclick(item)">{{item.name}}</text>
					</view>
				</view>
			</next-indexed-xlist>
		</view>
		
	</view>
</template>
<style lang="scss" scoped>
.rm-box{
	background:#fff;
	padding:20rpx;
	margin-bottom:20rpx;
	
	.title{
		font-size:24rpx;
		margin-bottom:20rpx;
	}
	.rm-current{
		display:flex;
		justify-content: space-between;
		.info{
			font-size:24rpx;
			padding:10rpx 20rpx;
		}
		.addressBtn{
			color:#7baee4
		}
	}
	.rm-city{
		display:flex;
		flex-wrap: wrap;
		.item-city{
			font-size:24rpx;
			width:30%;
			text-align: center;
			height:72rpx;
			line-height:72rpx;
			margin-bottom:20rpx;
			margin-right:20rpx;
			background:#f4f4f4;
		}
	}
}
</style>